<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="stylesheet" href="style.css" />
    <script src="../../lib/vue2.js"></script>
  </head>
  <body>
    <!-- 最外层box盒子 -->
    <div id="box">
      <template v-if="itemList.length > 0">
        <!-- 全选/全不选 顶部区域 -->
        <header>
          <input
            type="checkbox"
            v-model="isAll"
            @change="allChecked"
          />全选/全不选
        </header>
        <!-- 中间主体显示商品区域 -->
        <section>
          <!-- 商品列表 -->
          <ul>
            <li v-for="item in itemList" :key="item.id">
              <input
                type="checkbox"
                v-model="checkedList"
                :value="item.id"
                @change="caliAll"
              />
              <div class="pic"><img src="../img/test.png" alt="none" /></div>
              <div class="infoArea">
                <span>商品：{{item.name}}</span>
                <span>价格：{{item.price}}</span>
                <span>添加日期：{{item.data}}</span>
              </div>
              <div class="numChange">
                <button @click="decItem(item.id)">&nbsp;-&nbsp;</button>
                <span>&nbsp;{{item.buyNum}}&nbsp;</span>
                <button @click="incItem(item.id)">&nbsp;+&nbsp;</button>
              </div>
              <button @click="delItem(item.id)">&nbsp;删除&nbsp;</button>
            </li>
            <!-- <li>
            <input type="checkbox" />
            <div class="pic"><img src="../img/test.png" alt="none" /></div>
            <div class="infoArea">
                <span>商品：商品1</span>
                <span>价格：199</span>
                <span>添加日期：2023-5-24</span>
            </div>
            <div class="numChange">
              <button>&nbsp;-&nbsp;</button>
              <span>&nbsp;1&nbsp;</span>
              <button>&nbsp;+&nbsp;</button>
            </div>
            <button>&nbsp;删除&nbsp;</button>
          </li> -->
          </ul>
        </section>
        <!-- 底部计算金额区域 -->
        <footer>
          <span>总金额：{{calFee()}} RMB</span>
        </footer>
      </template>

      <!-- 空空如也 -->
      <template v-else>
        <h1>空空如也</h1>
      </template>
    </div>

    <script src="test.js"></script>
  </body>
</html>
